<template>
    <div class="mainContext">
        <el-card class="box-card">
            <el-button class="add_btn" type="primary" @click="addDialog=true" >添加</el-button>
            <el-table class="table"
                      :data="dormitoryData"

                      stripe
                      style="width: 100% ;min-height:250px">
                <el-table-column
                        prop="dname"
                        label="宿舍楼名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="did"
                        label="宿舍楼编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="manager.uname"
                        label="管理员">
                </el-table-column>
                <el-table-column

                        label="操作">
                    <template #default="scope">
                        <el-button @click="delRow(scope.row)" type="text" size="small">删除</el-button>
                        <el-button  @click="updateRow(JSON.parse(JSON.stringify( scope.row )))" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
                title="添加寝室楼"
                v-model="addDialog"
                width="500px"
                :before-close="handleClose">
            <el-form  :model="dorInfo" class="form" ref="dorInfo" :rules="dorRules"  label-width="100px">
                <el-form-item label="宿舍楼编号" prop="did">
                    <el-input v-model="dorInfo.did" placeholder="请输入编号"></el-input>
                </el-form-item>
                <el-form-item label="宿舍楼名称" prop="dname">
                    <el-input v-model="dorInfo.dname" placeholder="请输入宿舍楼名"></el-input>
                </el-form-item>
                <el-form-item label="管理员" >

                        <el-select class="sel_man" v-model="dorInfo.manager.uname" filterable placeholder="请选择管理员">
                            <el-option
                                    v-for="item in managerData"
                                    :key="item.uname"
                                    :label="item.uname"
                                    :value="item.uname">
                            </el-option>
                        </el-select>


                </el-form-item>

                <el-form-item style="margin-left: -50px !important;">
                    <el-form-item class="el-col-lg-push-5" >
                        <el-button type="primary" @click="addDor">提交</el-button>
                        <el-button @click="resetForm('dorInfo')">重置</el-button>
                    </el-form-item>



                </el-form-item>

            </el-form>
        </el-dialog>

        <el-dialog
                title="修改寝室楼"
                v-model="updateDialog"
                width="500px"
                :before-close="handleClose">
            <el-form  :model="dorInfo" class="form" ref="dorupdate" :rules="dorRules"  label-width="80px">
                <el-form-item label="编号" prop="did">
                    <el-input disabled v-model="dorInfo.did" placeholder="请输入编号"></el-input>
                </el-form-item>
                <el-form-item label="宿舍楼名" prop="dname">
                    <el-input v-model="dorInfo.dname" placeholder="请输入宿舍楼名"></el-input>
                </el-form-item>
                <el-form-item label="管理员" >
                    <el-select class="sel_man" v-model="dorInfo.manager.uname" filterable placeholder="请选择管理员">
                        <el-option
                                v-for="item in managerData"
                                :key="item.uname"
                                :label="item.uname"
                                :value="item.uname">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-form-item style="margin-left: -50px !important;" >
                        <el-button type="primary" @click="updateDor">提交</el-button>
                        <el-button @click="resetForm('dorupdate')">重置</el-button>
                    </el-form-item>



                </el-form-item>

            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import api from '../api'

    export default {
        name: "Dormitory",
        data(){
            return{
                dormitoryData:[],
                managerData:[],
                addDialog:false,
                updateDialog:false,
                dorInfo:{
                    did:null,
                    dname:'',
                    manager:{
                        uname:''
                    }
                },
                dorRules:{
                    did:{required: true, message: '该项不可空', trigger: 'blur'},
                    dname:{required: true, message: '该项不可空', trigger: 'blur'},
                    manager:{
                        uname:{required: true, message: '该项不可空', trigger: 'blur'}
                    }
                }
            }
        },methods:{
            updateDor(){
                this.$refs["dorupdate"].validate((valid) => {
                    if (valid) {
                        api.post("/dormitory/update",this.dorInfo).then(res=>{
                            if(res.state){
                                this.loadData();
                                this.$message.success("数据提交成功!")
                                this.updateDialog=false
                                this.cleanData();
                            }else{
                                this.$message.error("数据提交出错!")
                            }
                        }).catch(res=>{
                            this.$message.error("服务器出错了!")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            addDor(){
                this.$refs["dorInfo"].validate((valid) => {
                    if (valid) {
                        api.post("/dormitory/save",this.dorInfo).then(res=>{
                            if(res.state){
                                this.loadData();
                                this.$message.success("数据提交成功!")
                                this.addDialog=false
                                this.cleanData();
                            }else{
                                this.$message.error("数据提交出错!")
                            }
                        }).catch(res=>{
                            this.$message.error("服务器出错了!")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            delRow(Row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.post("/dormitory/delete",{did:Row.did,q:"qiq"}).then(res=>{
                        if(res.state){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadData();
                        }else{
                            this.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    }).catch(res=>{
                        this.$message({
                            type: 'success',
                            message: '服务器出错了!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateRow(Row){
                this.updateDialog=true;
                if(Row.manager==null){
                    Row.manager={}
                    Row.manager.uname=null;
                }
                this.dorInfo =Row;
            },
            loadData() {
                api.post("/dormitory/list",{}).then(res => {
                    // console.log(res.data.list)
                    if(res.state)
                        this.dormitoryData=res.data.list;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
                api.post("/manager/list",{}).then(res=>{

                    if(res.state)
                        this.managerData=res.data;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.cleanData();
                        done();
                    })
                    .catch(_ => {});
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            cleanData(){
                this.dorInfo={
                    did:null,
                        dname:'',
                        manager:{
                        uname:''
                    }
                }
            }

        },created() {

        },mounted() {
            this.loadData();
        }
    }
</script>


<style  lang="scss">

 .mainContext {
    margin: 100px auto;
    text-align: center;

     .box-card{
         width: 1000px;
         margin: 0px auto;
         border-radius: 10px;
         box-shadow: #ccc 10px 10px 10px;
         .add_btn{
             float: right;
             margin: 0px 50px 20px 10px;
         }
         .el-card{
             border-radius: 5px;
         }
         .table{
         }
     }
     .form{
         margin: 20px 50px;
     }
     .sel_man{
         width: 100%;
     }
     /*.reset_margin_left{*/
     /*    margin-left: 1px !important;*/
     /*}*/
     .cell{
         text-align: center;
     }

 }
</style>